<template>
	<div id="editStudent">
		<div class="breadcrumb">
			<img src="../../../../static/img/campus_icon_1.png" class="head_img">
			<span class="title" @click="cancel()">学生管理</span>/ 编辑
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">学生信息</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-form ref="studentForm" :model="studentForm" :rules="rules" label-width="120px">
				<el-form-item label="学生姓名：" prop="name">
					<el-input v-model="studentForm.name" placeholder="请输入学生姓名，不超过20个字符" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="手机号码：" prop="phone">
					<el-input v-model="studentForm.phone" class="el-input" disabled></el-input>
				</el-form-item>
				<el-form-item label="性别：" prop="gender" required>
					<el-radio v-model="studentForm.gender" label="1">男</el-radio>
					<el-radio v-model="studentForm.gender" label="0">女</el-radio>
				</el-form-item>
				<el-form-item label="校园号：" prop="campusId">
					<el-input v-model="studentForm.campusId" placeholder="请输入校园号，不超过20个字符" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="校区：" prop="campusZone" required>
					<el-select v-model="studentForm.campusZone">
						<el-option v-for='item in campusZones' :label='item.name' :value='item.unid' :key="item.unid"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="院系：" prop="departId">
					<el-select v-model="studentForm.departId" @change="getClasses()">
						<el-option v-for='item in departs' :label='item.department' :value='item.id' :key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="班级：" prop="classId">
					<el-select v-model="studentForm.classId">
						<el-option v-for='item in classes' :label='item.className' :value='item.classId' :key="item.classId"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				uid: "",
				campusZones: [],
				departs: [],
				classes: [],
				studentForm: {
					name: "",
					phone: "",
					gender: "1",
					campusId: "",
					campusZone: "",
					departId: "",
					classId: ""
				},
				rules: {
					name: [
						{ required: true, message: "学生姓名不能为空", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					campusId: [
						{ required: true, message: "校园号不能为空", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }]
				}
			};
		},
		computed: mapState({ user: state => state.user }),
		mounted() {
			this.uid = this.$util.getUrlParam("uid");
			this.getDeparts();
			this.getUserInfo();
			this.getCampus();
		},
		methods: {
			//用户信息；
			getUserInfo() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/studentinfo";
				this.$http({
					url,
					method: "GET",
					params: {
						uid: this.uid
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let $name = response.data.data.name,
							$gender = response.data.data.gender,
							$campusId = response.data.data.campusId,
							$unid = response.data.data.unid,
							$phone = response.data.data.phone,
							$departId = response.data.data.departId,
							$gradeClassId = response.data.data.gradeClassId;
						
						this.studentForm = {
							name: $name,
							phone: $phone,
							campusZone: $unid,
							gender: $gender + "",
							campusId: $campusId + "",
							departId: $departId + '',
							classId: $gradeClassId + ''
						};
					}
				});
			},
			// 保存学生信息
			save() {
				let url = this.$util.domain + "/student/editUser/form";
				let departName = '', departClassName = '';

				this.departs.forEach(element => {
					if (element.id == this.studentForm.departId) {
						departName = element.department
					}
				});
				this.classes.forEach(item => {
					if (item.classId == this.studentForm.classId) {
						departClassName = item.className
					}
				})

				this.$refs.studentForm.validate(valid => {
					if (valid) {
						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								uid: this.uid,
								name: this.studentForm.name,
								gender: this.studentForm.gender,
								unid: this.studentForm.campusZone,
								campusId: this.studentForm.campusId,
								departId: this.studentForm.departId * 1,
								classId: this.studentForm.classId * 1,
								department: departName,
								gradeClass: departClassName
							})
						}).then(response => {
							if (response.data.type == 200) {
								this.$util.successMsg("编辑学生信息成功");
								location.href = "/#/studentManage";
							} else {
								this.$util.errorMsg(response.data.msg, "温馨提示");
							}
						});
					}
				});
			},
			cancel() {
				let sid = this.$util.getUrlParam("sid");
				let mid = this.$util.getUrlParam("mid");
				let cid = this.$util.getUrlParam("cid");
				let freezeType = this.$util.getUrlParam("freezeType");
				let condition = this.$util.getUrlParam("condition");
				let pageNum = this.$util.getUrlParam("pageNum");
				let params = {
					sid, mid, cid, freezeType, pageNum, condition
				}
				this.$util.refreshTo("/#/studentManage", params);
			},
			getCampus() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/campuszones";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								this.campusZones.push({
									unid: dataList[i].unid,
									name: dataList[i].zoneName
								});
							}
						}
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			},
			//获取所有院系
			getDeparts() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/departments";

				this.$http({
					url,
					method: "GET",
					params: {
						rootUnid: this.user.rootUnid + ""
					}
				}).then(response => {
					this.departs = [];
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						let isTrue = false;
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								this.departs.push({
									department: dataList[i].department,
									id: dataList[i].id + ''
								});
								if (this.studentForm.departId == dataList[i].id) {
									isTrue = true;
								}
							}
						}
						if (!isTrue) {
							this.studentForm.departId = '';
						}
					}
				});
			},
			// 获取行政班级列表
			getClasses() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/gradeclasses";

				this.$http({
					url,
					method: "GET",
					params: {
						departId: this.studentForm.departId * 1
					}
				}).then(response => {
					this.classes = [];
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						let isTrue = false;
						if (dataList && dataList.length > 0) {
							dataList.forEach(item => {
								this.classes.push({
									classId: item.classId + '',
									className: item.className
								});
								if (this.studentForm.classId == item.classId) {
									isTrue = true;
								}
							})
						}
						if (!isTrue) {
							this.studentForm.classId = '';
						}
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			}
		}
	};
</script>

<style scoped>
	#editStudent {
		padding-top: 80px;
		height: calc(100% - 130px);
		overflow: hidden;
	}

	.title {
		color: #0398ff;
	}

	.add {
		position: absolute;
		right: 20px;
		background-color: #00c18b;
	}

	#editStudent .el-input {
		display: inline-block;
		width: 40%;
	}

	.qizhiDate {
		width: 100%;
	}
</style>